<script setup>
import { ref, reactive, nextTick, onMounted } from 'vue';
import { sensorByIdData } from '@T2/service/api.ts';
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts';
import dayjs from 'dayjs';

const props = defineProps({
  editObj: {
    type: Object,
    required: true,
  }
});
const emits = defineEmits(['close']);
const dftShow = ref(true);

const chartsRef = ref(null);
let myChart = null;
onMounted(() => {
  nextTick(() => {
    myChart = echarts.init(chartsRef.value);
    loadSensorsData();
  });
});
const loadSensorsData = async () => {
  if (!props.editObj.data.length) {
    return;
  }
  let { statusT } = props.editObj.data[0];
  if (!statusT?.id) {
    return;
  }
  let datas = [], unit = '';
  await sensorByIdData({
    method: 'get',
    id: statusT.id,
    params: {
      start: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
      end: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      page: 1,
      pagesize: 1000,
      ordering: '-create_time',
    }
  }).then(res => {
    datas = res.results?.map(item => {
      return [item.create_time, item.data];
    });
    unit = res.unit;
  });
  option.series.data = datas;
  option.yAxis.name = unit;
  myChart.setOption(option);
}

const option = {
  animation: true,										  	  //是否开启动画
  backgroundColor: 'rgba(0, 18, 24, 0)',    //无背景颜色
  color: '#31A0A1',
  tooltip: {
    trigger: 'axis',                        //axis坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
  },
  grid: {
    containLabel: true,                 //为true表示外边 距离 包含刻度标签在内的整个图表
    bottom: 10,                         //网格离容器底部距离
    right: 40,                          //网格离容器右侧距离
    left: 40,                           //网格离容器左侧距离
    top: 10,                            //网格离容器顶部距离
  },
  xAxis: {
    boundaryGap: false,                   //boundaryGap值为false的时候，折线第一个点在y轴上
    type: 'time',                         //时间轴
    splitNumber: 5,
    axisLine: {
      lineStyle: {
        width: 2,
        color: '#979797',
      }
    },
    axisLabel: {
      color: '#979797',
      fontSize: 12,
      fontFamily: 'Helvetica',
      formatter: (value) => dayjs(value).format('HH:mm'),
    },
  },
  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        color: '#979797',
        type: [4, 4],
      }
    },
    axisLabel: {
      color: '#FFFFFF',
      fontFamily: 'Helvetica',
      fontWeight: 400,
      lineHeight: 14,
      fontSize: 12,
    },
    nameTextStyle: {
      color: '#FFFFFF',             //坐标轴名称字体颜色
      fontSize: 12,                       //坐标轴名称字体大小
    },
  },
  dataZoom: {
  	type: "inside",
    preventDefaultMouseMove: false,
  },
  series: {
    name: '',
    type: 'line',
    showSymbol: false,
    lineStyle: {
      width: 2,
    },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0,1,0,0, [{offset: 0, color: 'rgba(49,160,161,0)'}, {offset: 1, color: 'rgba(49,160,161,0.6)'}]),
    },
    data: [],
  }
}
</script>

<template>
  <div class="nc-box">
    <el-dialog class="nc-dialog flex-column" v-model="dftShow" width="fit-content" @close="emits('close', false)">
      <div class="name">参数详情</div>
      <div class="close-icon pointer" @click="emits('close', false)">
        <el-icon color="#000000" size="26"><CloseBold /></el-icon>
      </div>
      <div class="charts-box" ref="chartsRef"></div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.charts-box {
  width: 520px;
  height: 280px;
}
.name {
  color: #C6FBF3;
  font-size: 22px;
  font-weight: 500;
  height: 26px;
  line-height: 26px;
  margin: 8px 0 45px 23px;
}
.close-icon {
  background-color: #39C2C3;
  position: absolute;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  right: 12px;
  top: 20px;
}
</style>
<style scoped>
:deep(.nc-dialog.el-dialog) {
  background: url('@T2/assets/common/zt-charts-pop.png') no-repeat center;
  background-size: 100% 100%;
  padding: 0;
  position: relative;
}
:deep(.nc-dialog.el-dialog header) {
  display: none;
}
</style>